<!-- 坐席状态统计 -->
<template>
	<div id="agentStatusStatis">
		<div class="statis">
			<div class="statis-title card">调解员状态统计</div>
			<div class="statis-chart">
				<div id="chartTop" class="card"></div>
				<div id="chartBottom" class="card"></div>
			</div>
		</div>
	</div>
</template>
<script setup name="agentStatusStatis">
	import { onMounted, onUnmounted } from 'vue'
	import * as echarts from 'echarts'
	import { throttle } from 'lodash'
	import biChartApi from '@/api/bi/biChartApi.js'
	// ===========================================DATA======================================================
	let colorList = ['#2657D1', '#5794F7', '#1A3FBE', '#708CE1', '#2A5CEA', '#96BAE4'] //antdv色值
	let chartTopDom
	let chartBottomDom
	let mixChartTop
	let mixChartBottom
	let mixChartTopOption = ref({
		color: colorList,
		title: {
			text: '日接通总数（个）',
			textStyle: {
				color: '#fff',
				fontWeight: 400,
				fontSize: 16
			},
			left: '2.5%'
		},
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(24, 35, 62, 0.9)',
			borderColor: '#1E4B9C',
			textStyle: {
				color: '#fff',
				align: 'left' // 文本左对齐
			}
		},
		grid: {
			top: '20%',
			left: '5%',
			right: '5%',
			bottom: '10%'
		},
		legend: {
			data: ['调解中心1', '调解中心2'],
			textStyle: {
				color: '#fff'
			}
		},
		xAxis: [
			{
				type: 'category',
				data: ['04-01', '04-02', '04-03', '04-05', '04-06', '04-07', '04-08'],
				axisPointer: {
					type: 'shadow'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				// name: '总数',
				// min: 0,
				// max: 250,
				// interval: 50,
				axisLabel: {
					formatter: '{value}'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				},
				nameTextStyle: {
					// Y轴名称的样式
					color: '#fff',
					padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
				},
				splitLine: {
					// 分割线样式
					lineStyle: {
						color: 'rgba(255,255,255,0.1)'
					}
				}
			}
			// {
			// 	type: 'value',
			// 	// name: '时长',
			// 	min: 0,
			// 	max: 25,
			// 	interval: 5,
			// 	axisLabel: {
			// 		formatter: '{value}'
			// 	},
			// 	axisLabel: {
			// 		// 轴标签样式
			// 		color: '#fff'
			// 	},
			// 	nameTextStyle: {
			// 		// Y轴名称的样式
			// 		color: '#fff',
			// 		padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
			// 	},
			// 	splitLine: {
			// 		// 分割线样式
			// 		lineStyle: {
			// 			color: 'rgba(255,255,255,0.1)'
			// 		}
			// 	}
			// }
		],
		series: [
			{
				name: '调解中心1',
				type: 'bar',
				barMaxWidth: 40,
				data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
				// markLine: {
				// 	silent: true,
				// 	symbol: 'none',
				// 	lineStyle: {
				// 		color: '#91caff' // 标记线颜色
				// 	},
				// 	data: [
				// 		{
				// 			yAxis: 100, // 阈值设置为100
				// 			label: {
				// 				show: true,
				// 				position: 'middle',
				// 				color: '#fff'
				// 			}
				// 		}
				// 	]
				// }
			},
			{
				name: '调解中心2',
				type: 'bar',
				barMaxWidth: 40,
				data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
			}
		]
	})
	let mixChartBottomOption = ref({
		color: colorList,
		title: {
			text: 'TOP10 调解员通话时长（分钟）',
			textStyle: {
				color: '#fff',
				fontWeight: 400,
				fontSize: 16
			},
			left: '2.5%'
		},
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(24, 35, 62, 0.9)',
			borderColor: '#1E4B9C',
			textStyle: {
				color: '#fff',
				align: 'left' // 文本左对齐
			}
		},
		grid: {
			top: '20%',
			left: '5%',
			right: '5%',
			bottom: '10%'
		},
		legend: {
			data: ['人均在线时长（分钟）'],
			textStyle: {
				color: '#fff'
			}
		},
		xAxis: [
			{
				type: 'category',
				data: [
					'调解员1',
					'调解员2',
					'调解员3',
					'调解员4',
					'调解员5',
					'调解员6',
					'调解员7',
					'调解员8',
					'调解员9',
					'调解员10'
				],
				axisPointer: {
					type: 'shadow'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				// name: '总数',
				// min: 0,
				// max: 250,
				// interval: 50,
				axisLabel: {
					formatter: '{value}'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				},
				nameTextStyle: {
					// Y轴名称的样式
					color: '#fff',
					padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
				},
				splitLine: {
					// 分割线样式
					lineStyle: {
						color: 'rgba(255,255,255,0.1)'
					}
				}
			}
		],
		series: [
			{
				name: '人均在线时长（分钟）',
				type: 'bar',
				barMaxWidth: 40,
				data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8]
			}
		]
	})
	let tooltipInterval = null //地图轮播定时器
	let curIndexTop = ref(0) //当前轮播索引
	let curIndexBottom = ref(0) //当前轮播索引
	// ===========================================WATCH=====================================================
	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(() => {
		// 折柱图
		setTimeout(async () => {
			chartTopDom = document.querySelector('#agentStatusStatis #chartTop')
			mixChartTop = echarts.init(chartTopDom)
			chartBottomDom = document.querySelector('#agentStatusStatis #chartBottom')
			mixChartBottom = echarts.init(chartBottomDom)
			// 数据请求
			const biResult = await getData()
			// console.log('AGENT_STATUS_STATISTICS_DAY', biResult)
			//日调解通话统计
			mixChartTopOption.value.xAxis[0].data = []
			let seriesData = []
			let legendData = []
			//找一个健全数据(四条都有正常数据的)
			const arr = biResult.officeVos.find((item) => {
				return (
					item.officeVos.filter((hid) => {
						return hid.deptName !== null && hid.deptName !== undefined && hid.deptName !== ''
					}).length === 4
				)
			})
			arr.officeVos = arr.officeVos.filter((item) => {
				return item.deptName !== null && item.deptName !== undefined && item.deptName !== ''
			})
			arr.officeVos.forEach((item, index) => {
				seriesData.push({
					type: 'bar',
					name: item.deptName,
					id: item.deptId,
					barMaxWidth: 40,
					data: []
				})
				legendData.push(item.deptName)
			})
			// 无论返回的有几个调解中心，默认都按四个处理，超过四个剔除，少于四个，添加空数据
			const data = structuredClone(biResult.officeVos)
			data.forEach((item, index) => {
				//item.officeVos的长度大于4，剔除到剩余四个
				//item.officeVos的长度小于4，添加空数据
				if (item.officeVos.length > 4) {
					item.officeVos.splice(4, item.officeVos.length - 4)
				} else if (item.officeVos.length < 4) {
					const needAdd = 4 - item.officeVos.length
					for (let i = 0; i < needAdd; i++) {
						item.officeVos.push({
							deptId: null
						})
					}
				}
			})

			data.forEach((item, index) => {
				mixChartTopOption.value.xAxis[0].data.push(item.currentDate.substr(5))
				// 遍历所有系列数据
				seriesData.forEach((series) => {
					// 在当前日期的数据中查找匹配的部门数据
					const matchDept = item.officeVos.find((hid) => hid.deptId === series.id)
					// 如果找到匹配的数据就使用实际值，否则使用null
					series.data.push(matchDept ? matchDept.totalCallDuration : 0)
				})
			})
			// console.log('seriesData',seriesData);

			mixChartTopOption.value.series = seriesData
			mixChartTopOption.value.legend.data = legendData
			mixChartTop.setOption(mixChartTopOption.value)

			//top10 调解员通话时长
			mixChartBottomOption.value.xAxis[0].data = []
			mixChartBottomOption.value.series[0].data = []
			biResult.agentCallVos.sort((a, b) => {
				return b.callDuration - a.callDuration
			})
			biResult.agentCallVos.forEach((item, index) => {
				mixChartBottomOption.value.xAxis[0].data.push(item.agentName ? item.agentName : item.agentId)
				mixChartBottomOption.value.series[0].data.push(item.callDuration)
			})
			mixChartBottom.setOption(mixChartBottomOption.value)

			// //添加tooltip轮播
			// startTooltipInterval()
			// //鼠标移入停止定时器
			// mixChartTop.on('mouseover', (params) => {
			// 	clearInterval(tooltipInterval)
			// 	tooltipInterval = null
			// })
			// //鼠标移出开启定时器
			// mixChartTop.on('mouseout', (params) => {
			// 	startTooltipInterval()
			// })
			// //鼠标移入停止定时器
			// mixChartBottom.on('mouseover', (params) => {
			// 	clearInterval(tooltipInterval)
			// 	tooltipInterval = null
			// })
			// //鼠标移出开启定时器
			// mixChartBottom.on('mouseout', (params) => {
			// 	startTooltipInterval()
			// })
		}, 1000)
		// 自适应大小
		const agentStatusResize = throttle(() => {
			setTimeout(() => {
				mixChartTop && mixChartTop.resize()
				mixChartBottom && mixChartBottom.resize()
			}, 500)
		}, 200)
		window.addEventListener('resize', agentStatusResize)
	})
	// 组件卸载时清理
	onUnmounted(() => {
		window.removeEventListener('resize', agentStatusResize)
		mixChartTop?.dispose()
		mixChartBottom?.dispose()
		clearInterval(tooltipInterval)
		tooltipInterval = null
	})
	// ===========================================METHODS==================================================
	//动态选中地图区域
	const highlightRegionTop = (index) => {
		mixChartTop.dispatchAction({
			type: 'showTip',
			seriesIndex: 0,
			dataIndex: index
		})
	}
	const highlightRegionBottom = (index) => {
		mixChartBottom.dispatchAction({
			type: 'showTip',
			seriesIndex: 0,
			dataIndex: index
		})
	}
	//开启tooltip轮播
	const startTooltipInterval = () => {
		tooltipInterval = setInterval(() => {
			if (curIndexTop.value >= mixChartTopOption.value.series[0].data.length - 1) {
				curIndexTop.value = 0
			}
			highlightRegionTop(curIndexTop.value++)

			if (curIndexBottom.value >= mixChartBottomOption.value.series[0].data.length - 1) {
				curIndexBottom.value = 0
			}
			highlightRegionBottom(curIndexBottom.value++)
		}, 2000)
	}
	// ===========================================REQUEST==================================================
	const getData = async () => {
		const res = await biChartApi.getResultByType('AGENT_STATUS_STATISTICS_DAY')
		return JSON.parse(res.biResult)
	}
</script>
<style lang="less" scoped>
	#agentStatusStatis {
		.statis-title {
			font-size: 20px;
			font-weight: 600;
			text-align: left;
			margin-bottom: 0;
			letter-spacing: 4px;
			line-height: 20px;
		}
		.statis {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			.statis-chart {
				flex: 1;
				display: flex;
				flex-direction: column;
				> div {
					flex: 1;
				}
				> div:nth-child(1) {
					margin: 10px 0;
				}
			}
		}
	}
</style>
